<template>
  <tbody>
    <tr v-for="(tiem, index) in list" :key="index">
      <th>
        <input
          type="checkbox"
          @click="checkbox(index)"
          v-model="tiem.checked"
        />
      </th>
      <th>{{ tiem.name }}</th>
      <th>{{ tiem.price }}</th>
      <th>
        <button @click="sub(index)">-</button>{{ tiem.num }}
        <button @click="add(index)">+</button>
      </th>
      <th>{{ tiem.price * tiem.num }}</th>
      <th><button @click="del(tiem.name)">删除</button></th>
    </tr>
  </tbody>
</template>

<script>
export default {
  props: ["list"],
  methods: {
    checkbox(i) {
      this.list[i].checked = !this.list[i].checked;
    },
    sub(i) {
      if (this.list[i].num > 1) {
        this.list[i].num--;
      }
    },
    add(i) {
      this.list[i].num++;
    },
    del(name) {
      const arr = this.list.filter((item) => item.name != name);
      this.$emit('newList',arr)
    },
  },
};
</script>

<style scoped>
th {
  font-weight: 400;
}
</style>
